// Real-time search suggestions
function setupSearchSuggestions() {
    const searchInput = document.getElementById('searchInput');
    const suggestionsBox = document.createElement('div');
    suggestionsBox.className = 'suggestions';
    searchInput.parentNode.appendChild(suggestionsBox);

    searchInput.addEventListener('input', function() {
        const query = this.value.toLowerCase();
        if (query.length > 0) {
            const filteredRestaurants = sampleRestaurants.filter(restaurant =>
                restaurant.name.toLowerCase().includes(query) ||
                restaurant.description.toLowerCase().includes(query)
            );
            displaySuggestions(filteredRestaurants, suggestionsBox);
        } else {
            suggestionsBox.style.display = 'none';
        }
    });

    searchInput.addEventListener('blur', function() {
        setTimeout(() => suggestionsBox.style.display = 'none', 200);
    });
}

function displaySuggestions(restaurants, suggestionsBox) {
    suggestionsBox.innerHTML = '';
    if (restaurants.length > 0) {
        restaurants.forEach(restaurant => {
            const suggestionItem = document.createElement('div');
            suggestionItem.className = 'suggestion-item';
            suggestionItem.textContent = restaurant.name;
            suggestionItem.addEventListener('click', function() {
                window.location.href = `restaurant-detail.html?id=${restaurant.id}`;
            });
            suggestionsBox.appendChild(suggestionItem);
        });
        suggestionsBox.style.display = 'block';
    } else {
        suggestionsBox.style.display = 'none';
    }
}

// Initialize search suggestions on page load
document.addEventListener('DOMContentLoaded', function() {
    getRestaurants();
    setupSearchSuggestions();
});// 获取餐厅列表
async function getRestaurants() {
    try {
        const response = await fetch('/api/restaurants/');
        const restaurants = await response.json();
        displayRestaurants(restaurants);
    } catch (error) {
        console.error('Error:', error);
        alert('获取餐厅列表失败');
    }
}

// 显示餐厅列表
function displayRestaurants(restaurants) {
    const restaurantList = document.querySelector('.restaurant-list');
    restaurantList.innerHTML = '';

    restaurants.forEach(restaurant => {
        const restaurantCard = document.createElement('div');
        restaurantCard.className = 'restaurant-card';
        restaurantCard.innerHTML = `
            <img src="${restaurant.image || '../images/default-restaurant.jpg'}" alt="${restaurant.name}">
            <h3>${restaurant.name}</h3>
            <p>${restaurant.description}</p>
            <p>评分: ${restaurant.rating}⭐</p>
            <p>地址: ${restaurant.address}</p>
            <button class="btn" onclick="viewMenu(${restaurant.id})">查看菜单</button>
        `;
        restaurantList.appendChild(restaurantCard);
    });
}

// 搜索餐厅
function searchRestaurants() {
    const searchTerm = document.getElementById('searchInput').value;
    fetch(`/api/restaurants/search/?q=${searchTerm}`)
        .then(response => response.json())
        .then(restaurants => displayRestaurants(restaurants))
        .catch(error => {
            console.error('Error:', error);
            alert('搜索失败');
        });
}

// 查看餐厅菜单
function viewMenu(restaurantId) {
    window.location.href = `restaurant-detail.html?id=${restaurantId}`;
}

// 页面加载时获取餐厅列表
document.addEventListener('DOMContentLoaded', getRestaurants);
